<div>
  <ul class="title capital-letters bottom-tab-margin-around">
    <!-- <li>{{'Data_Visualization.Overall.Overall' | translate}}</li> -->
    <!-- <li>{{'Data_Visualization.Overall.Incident_Analytics' | translate}}</li> -->
    <li>{{'Data_Visualization.Overall.Traffic_Analytics' | translate}}</li>
    <!-- <li>{{'Data_Visualization.Overall.Equipment_Analytics' | translate}}</li> -->
  </ul>
</div>

<div nz-row class="allcontainer bottom-tab-margin-around totalArea">
  <div nz-col nzSpan="7">
    <itmp-traffic-flow titletext="Traffic_flow_entering_city" [data]="enteringCity"></itmp-traffic-flow>
  </div>
  <div nz-col nzSpan="10">
    <itmp-realtime-traffic-flow titletext="Real_Time_Traffic" [data]="realTimeTraffic"></itmp-realtime-traffic-flow>
  </div>
  <div nz-col nzSpan="7">
    <itmp-traffic-flow titletext="Traffic_flow_going_out_city" [data]="goingoutCity"></itmp-traffic-flow>
  </div>
</div>
<div nz-row class="allcontainer  bottom-tab-margin-around totalArea">
  <div nz-col nzSpan="7">
    <itmp-road-congestion-ratio titletext="current_ratio" [data]="curRatio"></itmp-road-congestion-ratio>
  </div>
  <div nz-col nzSpan="10">
    <itmp-three-roads titletext="smooth_roads" [data]="smoothRoads"></itmp-three-roads>
  </div>
  <div nz-col nzSpan="7">
    <itmp-vehicle-flow titletext="vehicle_flow" [data]="vehicleFlow"></itmp-vehicle-flow>
  </div>
</div>
<!--
<div nz-row class="allcontainer">
  <div nz-col nzSpan="7">
    <itmp-road-congestion-ratio titletext="yesterday_ratio" [data]="yesterdayRatio"></itmp-road-congestion-ratio>
  </div>
  <div nz-col nzSpan="10">
    <itmp-three-roads titletext="congestion_roads" [data]="congestionRoads"></itmp-three-roads>
  </div>
  <div nz-col nzSpan="7">
      <itmp-last-info [data]="lastInfo"></itmp-last-info>
  </div>
</div>-->
